<template>
    <div>
        <headers />
        <div class="container">
            <div>
                <div class="userCenterWarp">
                    <div class="userCenterTitle">个人中心</div>
                    <el-row :gutter="30">
                        <el-col :span="4">
                            <sideNav />
                        </el-col>
                        <el-col :span="20" class="mt-30">
                            <el-breadcrumb separator-class="el-icon-arrow-right" class="user-breadcrumb">
                                <el-breadcrumb-item><strong>基本信息</strong></el-breadcrumb-item>
                            </el-breadcrumb>
                            <el-form :rules="rules" ref="ruleForm" :model="ruleForm" label-width="100px"
                                style="width: 730px;">
                                <el-form-item label="头像">
                                    <div class="avatar-uploader">
                                        <uploadFile v-model="ruleForm.avatar" :limit="1" :multiple="false">
                                            <template v-slot:upBtn>
                                                <el-avatar v-if="ruleForm.avatar" :src="ruleForm.avatar"
                                                    class="avatar"></el-avatar>
                                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                            </template>
                                        </uploadFile>
                                    </div>


                                    <div class="flex flex-wrap">
                                        <div class="m-4">
                                            <upload @change="onChange" @success="onSuccess" @error="onError"
                                                :show-progress="true">
                                                <el-button type="primary">上传图片</el-button>
                                            </upload>
                                        </div>
                                        <div class="m-4">
                                            <upload type="video" @change="onChange" @success="onSuccess"
                                                @error="onError" :show-progress="true">
                                                <el-button type="primary">上传视频</el-button>
                                            </upload>
                                        </div>
                                        <div class="m-4">
                                            <upload :multiple="false" @change="onChange" @success="onSuccess"
                                                @error="onError" :show-progress="true">
                                                <el-button type="primary">取消多选</el-button>
                                            </upload>
                                        </div>
                                        <div class="m-4">
                                            <upload :limit="2" @change="onChange" @success="onSuccess" @error="onError"
                                                :show-progress="true">
                                                <el-button type="primary">一次最多上传2张</el-button>
                                            </upload>
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item label="用户名">
                                    <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
                                </el-form-item>
                                <el-form-item label="修改密码">
                                    <el-link type="info" :underline="false"
                                        @click="$router.push('changePassword')">立即修改</el-link>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="danger" class="custom-btn" @click="onSubmit">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import headers from '@/components/header.vue'
import sideNav from './components/sideNav.vue'
import uploadFile from '@/components/uploadFile.vue'
import upload from '@/components/upload.vue'
import { editInfo } from '@/api/apis'
export default {
    name: 'profile',
    components: {
        headers,
        sideNav,
        uploadFile,
        upload
    },
    data () {
        return {
            ruleForm: {
                username: '',
                avatar: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                avatar: [
                    { required: true, message: '请上传头像', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters(['isLogin', 'userInfo'])
    },
    created () {
        this.ruleForm.username = this.userInfo.username
        this.ruleForm.avatar = this.userInfo.avatar
    },
    methods: {
        onSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    editInfo(this.ruleForm).then(res => {
                        if (res.code === 1) {
                            this.$message.success(res.msg)
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                }
            })
        },
        onChange (file) {
            console.log('上传文件的状态发生改变', file)
        },
        onSuccess (file) {
            console.log('上传文件成功', file)
        },
        onError (file) {
            console.log('上传文件失败', file)
        }
    },
}
</script>

<style scoped lang="less">
.header {
    font-size: 18px;
    color: #333;
    font-weight: 600;
    margin-bottom: 30px;
}

.avatar-uploader {
    /deep/.el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        &:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 75px;
            height: 75px;
            line-height: 75px;
            text-align: center;
        }
    }

    .avatar {
        width: 75px;
        height: 75px;
        display: block;
    }
}
</style>